<template>
  <div>
    <!-- 个人信息页 -->
    <van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="$router.back()" />
    <div class="pagh"  @click="$router.push('/card')">
      <span class="tou">头像</span>
      <div class="right">
        <img
          src="https://img2.baidu.com/it/u=1333237491,1795884643&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1686762000&t=325a08d4580fbc8649dd87dc200b5f4c"
          alt="">
          <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"><!----><!----><!----></i>
      </div>
    </div >
    <div  >
       <van-cell title="昵称" is-link to="card1" />
          <van-cell title="真实姓名" :value="selfList.name" />
          <van-cell title="性别" :value="selfList.sex" />
          <van-cell title="身份证号" :value="selfList.id" />
          <van-cell title="邮箱" :value="selfList.email" />
          <van-cell title="手机" :value="selfList.phone" />
    </div>
         
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { getSelfList } from '@/api/self'

const selfList = ref([])
getSelfList().then(res=>{
  selfList.value=res.data.list
  // console.log(selfList);
})


</script>
 
<style lang="scss" scoped>
.pagh {
  width: 375px;
  height: 56px;
  line-height: 56px;
  font-weight: normal;
  font-style: normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tou{
    margin-left: 15px;
  }
  .right{
    margin-right: 20px;
  }

  img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-top: 15px;
    // margin-right: 0.2rem;
  }
}
</style>